<template>
  <div class="booking-warp">
    <image :src="data.headImg" mode="widthFix" class="width100 head-img" />
    <div class="card-box m-auto">
      <div class="card card-shadow">
        <div class="card-title">
          <i class="icon icon-introduce"></i><span class="vertical-middle">服务介绍</span>
        </div>
        <div class="card-cont">{{data.introduce}}</div>
      </div>
      <div class="card card-shadow">
        <div class="card-title">
          <i class="icon icon-money"></i><span class="vertical-middle">服务价格</span>
        </div>
        <div v-if="data.priceShow === 'horizontal'" class="card-cont">
          <ul class="flex-box items-center text-center">
            <li class="flex-1" v-for="item in data.servicePrice" :key="index">
              <div class="price-box"><span :class="[ 'price', index === 0 ? 'one' : 'two' ]">{{item.price}}元</span>/{{item.unit}}</div>
              <div class="small" :class="{full: item.full}">{{item.cont}}</div>
            </li>
          </ul>
        </div>
        <ul v-else-if="data.priceShow === 'vertical'" class="vertical-cont">
          <li v-for="item in data.servicePrice" :key="index" class="cont-item">
            <h3>{{item.title}}</h3>
            <div class="price-box">
              <i class="price inline">￥{{item.price}}</i>/{{item.unit}}
            </div>
            <p>{{item.cont}}</p>
            <p>{{item.note}}</p>
          </li>
        </ul>
      </div>
      <div class="card card-shadow">
        <div class="card-title">
          <i class="icon icon-heart"></i><span class="vertical-middle">服务范围</span>
        </div>
        <div class="card-cont">
          <ul class="scope-box text-center">
            <li class="scope-item" v-for="item in data.serviceScope" :key="index">
              <image :src="item.img" mode="widthFix" class="scope-img" />
              <div v-if="item.title">{{item.title}}</div>
              <div>{{item.cont}}</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="btn-full-box">
        <button class="btn-full" form-type="submit">立即预定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BookingPage',
  props: {
    data: Object
  }
}
</script>

<style lang="less">
  .booking-warp{
    .head-img {
      margin-bottom: 14px;
    }
    .card-box {
      width: 345px;
      .card {
        box-sizing: border-box;
        border-radius: 4px;
        width: 100%;
        padding: 14px 15px;
        font-size: 14px;
        margin-bottom: 15px;
        .card-title{
          font-size: 15px;
          border-bottom: 1px solid rgb(234, 234, 234);
          line-height: 17px;
          padding-bottom: 10px;
          .icon{
            width: 15px;
            height: 15px;
            margin-right: 10px;
          }
        }
        .card-cont{
          color: #666;
          line-height: 24px;
          margin-top: 10px;
          .price-box{ 
            padding: 14px 0 3px;
            font-size: 15px;
            color: #333;
            .price { 
              font-size: 19px; 
              &.one{color: #467fcd;}
              &.two{color: #fa4b70;}
            }
          }
          .small{font-size: 12px;padding-bottom: 6px;}
          .full{
            display: inline-block;
            border-radius: 4px;
            background-color: rgb(202, 161, 106);
            line-height: 1;
            padding: 4px 5px;
            color: #fff;
          }
        }
        .vertical-cont{
          font-size: 12px;
          .cont-item{
            margin-top: 10px;
            padding-top: 20px;
            padding-bottom: 25px;
            background-color: #f8f9f9;
            p{color: #888;padding-left: 15px;}
            h3{
              font-size: 18px;
              font-weight: 700;
              border-left: 8px solid #aaa;
              padding-left: 10px;
              margin-bottom: 8px;
            }
            .price-box{
              padding-left: 15px;
              font-size: 14px;
              margin-bottom: 6px;
              .price{
                color: #467fcd;
                font-size: 20px;
              }
            }
          }
        }
        .scope-box{
          width: 100%;
          overflow: hidden;
          padding-bottom: 20px;
          .scope-item{
            float: left;
            width: 50%;
            padding-bottom: 3px;
            .scope-img{
              width: 105px;
              height: 105px;
              margin: 20px 0 10px;

            }
          }
        }
      }
    }
  }
</style>
